<!--
 * @Description: 
 * @Author: 
 * @Date: 2020-01-16 16:40:46
 * @LastEditors  : fylih
 * @LastEditTime : 2020-01-17 11:07:58
 -->
<template>
  <div class="page_container">
    <slot name="left">
      请插入左边视图slot="left"</slot>
    <div class="line"
         @mousedown="draggle"></div>
    <slot name="right">
      请插入右边视图slot="right"</slot>
  </div>
</template>
<script>
export default {
  props: {
    leftWidth: {
      default: 200
    },
    hidden_auto: {
      type: String,
      default: 'hidden'
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      var left = this.$slots.left[0].elm
      var right = this.$slots.right[0].elm
      left.style.overflow = this.hidden_auto;
      right.style.overflow = 'auto'
      left.style.width = this.leftWidth + 'px'
      right.style.width = 'calc(100% - ' + left.style.width + ')'
    })
  },
  methods: {
    draggle(e) {
      var left = this.$slots.left[0].elm
      var right = this.$slots.right[0].elm
      var startX = e.clientX
      var startWidth = left.clientWidth
      document.onmousemove = function(e) {
        var offset = e.clientX - startX
        if (startWidth + offset > 500) {
          offset = 500 - startWidth
        } else if (startWidth + offset <= 0) {
          offset = -startWidth
        }
        left.style.width = startWidth + offset + 'px'
        right.style.width = 'calc(100% - ' + left.style.width + ')'
      }
      document.onmouseup = function(evt) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>
<style lang="less">
.page_container {
  width: 100%;
  height: 100%;
  display: flex;
  .line {
    height: 100%;
    width: 4px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    cursor: w-resize;
  }
}
</style>